import { useMemo } from "react";
import { Cloud } from "@react-three/drei";
import { rand } from "../../utils";

// 云层
export default ({ num }) => {
  const arr = useMemo(
    () =>
      [...Array(num)].map(() => ({
        opacity: rand(5, 10) / 10,
        x: rand(-200, 200),
        z: rand(-200, 20),
      })),
    [num]
  );

  return arr.map((vo, index) => (
    <Cloud
      key={index}
      position={[vo.x, 40, vo.z]}
      speed={0.5}
      opacity={vo.opacity}
      texture="./cloud.png"
    />
  ));
};
